<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!--搜索-->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="班级">
        <el-select v-model="searchForm.className" clearable placeholder="班级">
          <el-option v-for="(claName,index) in this.$store.state.classList" :key="index" :label="claName"
                     :value="claName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="dialogFormVisible=true,studentForm={}">添加</el-button>
      </el-form-item>
    </el-form>

    <!--学生列表-->
    <el-table :data="searchStudents" border style="width: 100%">
      <el-table-column prop="className" label="班级" width="180"></el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.cardId" placement="right-start">
            <span>{{scope.row.username}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          <svg class="icon" aria-hidden="true">
            <use v-if="scope.row.sex==='男'" xlink:href="#iconnanlaoshi"></use>
            <use v-if="scope.row.sex==='女'" xlink:href="#iconnvlaoshi"></use>
          </svg>
          <span>{{scope.row.sex}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机">
        <template slot-scope="scope">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconshouji--"></use>
          </svg>
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否结清费用">
        <template slot-scope="scope">
          <span>{{scope.row.isPlayOver==1?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="edit(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="success" plain @click="openStudentDetail(scope.row.id)">{{scope.row.id}}详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40">
    </el-pagination>

    <!--添加层-->
    <el-dialog title="保存学生信息" :visible.sync="dialogFormVisible" width="600px">
      <el-form label-position="right" :model="studentForm">
        <el-form-item label="学生id" v-if="studentForm.id">
          <el-input v-model="studentForm.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="学生名称">
          <el-input v-model="studentForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="studentForm.sex" label="男">男</el-radio>
          <el-radio v-model="studentForm.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="studentForm.className" placeholder="班级">
            <el-option v-for="(className,index) in $store.state.classList" :key="index" :label="className"
                       :value="className"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生年龄">
          <el-input v-model="studentForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="studentForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save(studentForm.id),dialogFormVisible = false">保存</el-button>
      </div>
    </el-dialog>

    <!--学生详情-->
    <el-dialog title="学生信息" :visible.sync="studenDialog" width="600px">
      <div>
        <el-row>
          <el-col :span="4">编号：</el-col>
          <el-col :span="18">{{student.id}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">姓名：</el-col>
          <el-col :span="18">{{student.username}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">班级：</el-col>
          <el-col :span="18">{{student.className}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">年龄：</el-col>
          <el-col :span="18">{{student.age}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">性别：</el-col>
          <el-col :span="18">{{student.sex}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">身份证：</el-col>
          <el-col :span="18">{{student.cardId}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">手机号：</el-col>
          <el-col :span="18">{{student.phone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">费用状态：</el-col>
          <el-col :span="18">
            <el-button type="info" plain size="mini" :disabled="student.isPlayOver==1" @click="selectMoney(student.id)">
              {{student.isPlayOver?'结清':'未结清'}}
            </el-button>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="studenDialog = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--费用情况dialog-->
    <el-dialog title="费用信息" :visible.sync="isPlayOverDialog" width="600px">
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isPlayOverDialog = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  function f(arr) {
    return Array.from(new Set(arr))
  }

  import {mapState} from 'vuex'

  export default {
    name: "Student",
    data() {
      return {
        dialogFormVisible: false,
        studenDialog: false,
        isPlayOverDialog:false,
        searchForm: {},
        studentForm: {},
        students: [
          {
            id: 1,
            className: '一班',
            username: '张三',
            age: 18,
            sex: '男',
            cardId: '421111199909092001',
            phone: '15618811111',
            isPlayOver: 1
          },
          {
            id: 2,
            className: '一班',
            username: '李四',
            age: 18,
            sex: '男',
            cardId: '421111199909092002',
            phone: '15618811111',
            isPlayOver: 1
          },
          {
            id: 3,
            className: '一班',
            username: '王五',
            age: 18,
            sex: '女',
            cardId: '421111199909092003',
            phone: '15618811111',
            isPlayOver: 0
          },
          {
            id: 4,
            className: '二班',
            username: '赵柳',
            age: 18,
            sex: '男',
            cardId: '421111199909092004',
            phone: '15618811111',
            isPlayOver: 1
          },
          {
            id: 5,
            className: '一班',
            username: '送气',
            age: 18,
            sex: '男',
            cardId: '421111199909092005',
            phone: '15618811111',
            isPlayOver: 0
          },
        ],
        searchStudents: [],
        classDatas: [],
        student: {},
        editStudent:{}
      }
    },
    mounted() {
      this.searchStudents = this.students
    },
    methods: {
      /*编辑*/
      edit(id){
        this.dialogFormVisible=true
        this.studentForm=this.students.find((student)=>{
          return student.id===id
        })
      },
      /*查看欠费情况*/
      selectMoney(id) {
        this.isPlayOverDialog=true
      },
      /*查看学生详细情况*/
      openStudentDetail(index) {
        this.studenDialog = true

        this.student = this.students.find((student) => {
          return student.id === index
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      save(id) {
        if(id==null){
          this.studentForm.id = this.students.length+1
          this.students.push(this.studentForm)
          this.studentForm = {}
        }else{
          let i = 0;
          this.students.find((student)=>{
              i++
              return student.id==this.studentForm.id
          })
          this.students.splice(i-1,1,this.studentForm)
        }
      },
      search() {
        var className = this.searchForm.className;
        if (className != '' && className != null) {
          this.searchStudents = this.students.filter((student) => {
            return student.className == className
          })
        } else {
          this.searchStudents = this.students
        }
      }
    }
  }
</script>

<style scoped>
  .el-form {
    margin-top: 20px;
  }

  .el-input {
    width: 70%
  }

  .el-row {
    margin-top: 10px;
  }

  .el-col:first-child {
    text-align: left;
    color: deepskyblue;
  }
</style>
